<template>
	<view class="paymentBehalf">
		<!-- "state": 7, //订单状态:1=待支付,8=待发货,3=待收货,4=待评论,5=售后订单(已弃用),6=已完成,7=已取消,2=待确认 -->
		<block class="" v-if="orderData && orderData.orders[0] && orderData.orders[0].state == 1">

			<view class="cf64" style="margin-top: 66rpx;">
				<text style="font-size: 44rpx;">
					￥
				</text>
				<text style="font-size: 62rpx;" class="">
					{{orderData.take_price}}
				</text>
			</view>
			<view class="c3d f24 flex_ac mt28">
				<text class="mr12">剩余支付时间</text>
				<u-count-down v-if="orderData.cancel_time>0" format="HH:mm:ss"
					:timestamp="orderData.cancel_time * 1000"></u-count-down>
				<view class="error tac" v-else>
					已超时
				</view>
			</view>
		</block>
		<!-- -->
		<block class="" v-if="orderData.orders[0] && orderData.orders[0].state == 2 ">
			<view class="flex_ac" style="margin-top: 66rpx;">
				<u-icon size="80" name="https://img.aibbyp.com/wechatUser/asaa.png"></u-icon>
				<text style="font-size: 62rpx;" class="ml12">
					代付成功
				</text>
			</view>
			<view class="c3d f36 flex_ac mt28">
				<text class=""> ￥{{orderData.take_price}}</text>
			</view>
		</block>
		<block class="" v-if="orderData.orders[0] && orderData.orders[0].state == 7 ">
			<view class="flex_ac" style="margin-top: 66rpx;">
				<text style="font-size: 62rpx;" class="ml12 info">
					￥{{orderData.take_price}}
				</text>
			</view>
			<view class="c3d f24 flex_ac mt36">
				<text class=""> 工匠已取消订单</text>
			</view>
		</block>
		<view class="c3 tal w100" style="margin-top: 74rpx;">
			<text class="mr12">
				帮付订单
			</text>
			<u-icon @click="popupDescribe = true" name="https://img.aibbyp.com/wechatUser/bfdd.png" size="24"></u-icon>
		</view>
		<view class="bac flex_sb mt24">
			<view class="">
				总运费：<text class="cf64">￥{{orderData.freight_price || '0.00'}}</text>
			</view>
			<view class="">
				总秒送费：<text class="cf64">￥{{orderData.send_price || '0.00'}}</text>
			</view>
		</view>
		<view class="bac flex mt24" v-for="(item,index) in orderData.goods" :key="index">
			<image class="img" :src="$wanlshop.oss(item.image)" mode=""></image>
			<view class="overflow_1 flex1 ml14">
				<view class="overflow_1 c3 f28">
					{{item.title}}
				</view>
				<view class="flex_sb info f24 mt12">
					<view class="">
						{{item.difference}}
					</view>
					<view class="">
						x{{item.number}}
					</view>
				</view>
				<view class="info tar mt12 f24" style="text-decoration:line-through;">
					￥{{item.market_price}}
				</view>
				<view class="cf64 tar mt12">
					￥{{item.take_price}}
				</view>
				<view class="f24 c6" @click="$wanlshop.to('/pages/shop/index?id=' + item.shop.id)">
					{{item.shop.shopname}} <u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="qzf" v-if="orderData.orders[0] && orderData.orders[0].state == 1">
			<button class="qzfbtb" @click="getcode" :loading="btnloading">去支付</button>
		</view>
		<u-popup v-model="popupDescribe" mode="bottom" border-radius="24">
			<view class="describe">
				<view class="f32 fb">
					说明
				</view>

				<rich-text class="describeHtml" :nodes="describeConcat.content"></rich-text>
				<view class="describeBtn" @tap="popupDescribe = false">
					知道啦
				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnloading: false,
				orderData: {},
				popupDescribe: false,
				order_ids: [],
				describeConcat: {},
				timestamp: 60 * 1000 * 1000
			}
		},
		onLoad(option) {
			console.log(option);
			if (option) {
				this.order_ids = option.order_ids.split(',').map(Number)
				this.takePayPage()
			}
			this.getarticle()
			this.getcode()
		},

		methods: {
			getcode() {
				this.btnloading = true
				uni.showLoading({
					title: '加载中'
				})
				uni.login({
					success: (e) => {
						this.take_payment(e.code);
					},
					fail: (e) => {
						this.btnloading = false
						uni.hideLoading();
						uni.showModal({
							content: "无法获取微信code,原因为: " + e.errMsg,
							showCancel: false
						})
					}
				})
			},

			take_payment(code) {
				this.$api.post({
					url: '/wanlshop/pay/take_payment',
					data: {
						"order_id": this.order_ids,
						"type": "wechat",
						"method": "mp",
						"code": code
					},
					success: res => {
						uni.requestPayment({
							appId: res.appId,
							nonceStr: res.nonceStr,
							package: res.package,
							paySign: res.paySign,
							signType: res.signType,
							timeStamp: res.timeStamp,
							success: (e) => {
								this.takePayPage()
								uni.hideLoading();
								this.btnloading = false
							},
							fail: (e) => {
								uni.hideLoading();
								this.btnloading = false
								uni.showModal({
									content: "支付失败",
									showCancel: false
								})
							}
						})
					},
					fail: error => {
						this.btnloading = false
					}

				})
			},
			takePayPage() {
				this.$api.post({
					url: '/wanlshop/order/takePayPage',
					data: {
						order_id: this.order_ids
					},
					success: res => {
						this.orderData = res

						let take_price = 0,
							freight_price = 0,
							send_price = 0

						res.pay.forEach(a => {
							take_price = this.$wanlshop.bcadd(take_price, a.take_price)
							freight_price = this.$wanlshop.bcadd(freight_price, a.freight_price)
							send_price = this.$wanlshop.bcadd(send_price, a.send_price)
						})

						this.orderData.freight_price = freight_price
						this.orderData.send_price = send_price
						this.orderData.take_price = take_price

					}
				})
			},
			getarticle() { //说明
				this.$api.get({
					url: '/wanlshop/article/details?id=15'
				}).then(res => {
					this.describeConcat = res
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.qzf {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		width: 100%;
		height: 170rpx;
		background: #fff;

		.qzfbtb {
			width: 632rpx;
			height: 80rpx;
			font-size: 40rpx;
			line-height: 80rpx;
			color: #FFFFFF;
			margin-top: 20rpx;
			background: #FE5F00;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
		}
	}

	.describe {
		padding: 20rpx 32rpx 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 60rpx;
		max-height: 70vh;

		.describeHtml {
			margin-top: 40rpx;
			width: 100%;
		}

		.describeBtn {
			width: 660rpx;
			height: 80rpx;
			background: #FD5241;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			margin-top: 60rpx;
		}
	}

	.paymentBehalf {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 24rpx 170rpx;

		.w100 {
			width: 100%;
		}

		.img {
			width: 230rpx;
			height: 230rpx;
		}

		.bac {
			width: 100%;
			padding: 26rpx 36rpx;
			background: #fff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}
</style>